Revision:
They can be inserted where you'd place a value, or in some cases, accompanying another value declaration.
Some CSS functions even let you nest other functions within them!
The output of CSS functions, which are visual in nature, is used to control both layout and presentation of content.
Creating animations requires controlling the state of things over time, so functions are a natural fit for making that happen.
The cubic-bezier() function can be used to create a custom timing function for your animation.
<style>
div {width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
div:hover {width:300px;}
transition: all 1s cubic-bezier(0.79, 0.33, 0.14, 0.53);
i{position:fixed; width:50px; height:50px; border-radius:50%; background:radial-gradient(at 30% 30%,#0000,#000a) red; left:20px; top:20px; animation: x 0.3s cubic-bezier(0,1.5,1,1.5) infinite;}
</style>
The path() function is paired with the "offset-path property" (or eventually, the "clip-path property"). It allows you to "draw" a SVG path that other elements can be animated to follow.
<style>
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
.item {width: 50px; height: 50px; background-color: red; border-radius: 50%;
offset-path: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");}
</style>
the steps() function allows you to set the easing timing across an animation, which allows for a greater degree of control over what part of the animation occurs when.
<style>
.second { animation: rotation 60s steps(60) infinite; transform-origin: 100% 50%;}
.pictureContainer img {position: relative; top: 0px; transition: top 1s steps(2, start);}
</style>
CSS filter functions can only work with the "filter property". Filters are special effects applied to an element, mimicking functionality of graphics editing programs, such as Photoshop.
the brightness() function adjusts how bright something appears. Setting it to a low level will make it appear as if it has had a shadow cast over it. Setting it to a high level will blow it out, like an over-exposed photo.
<style>
filter: brightness(0.4);
img {filter: brightness(200%);}
</style>
the blur() function will make the thing applied to looking more indistinct, the more you use it.
<style>
filter: blur(5px);
img.background {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: -1; filter: blur(35px);}
</style>
the contrast() function will adjust the degree of difference between the lightest and darkest parts of what is applied to.
<style>
filter: contrast(200%);
img {filter: contrast(200%);
}
</style>
the grayscale() function removes the color information from what it is applied to. You can apply a partial grayscale effect to make something look weathered or washed out.
<style>
filter: grayscale(50%);
img {filter: grayscale(100%);}
</style>
the invert() function can be used to make something look like a photo negative.
<style>
filter: invert(75%);
img {filter: invert(100%);}
</style>
the opacity() function controls how much of the background is visible through the element (and child elements) the function is applied to.
<style>
filter: opacity(25%);
img {filter: opacity(30%);}
</style>
the saturate() function can enhance or decrease the intensity of the color of what it is applied to. Enhancing an image's saturation is a common technique photographers use to fix underexposed photos.
<style>
filter: saturate(30%);
img {filter: saturate(800%);}
</style>
the sepia() function makes something look like it's an old-timey photograph.
<style>
img {filter: sepia(100%);}
.filtered {filter: sepia(100%);}
</style>
a drop-shadow() is a visual effect applied to an object that makes it appear like it is hovering off of the page. There's a bit of a trick here, in that CSS also allows you to apply drop shadow effects to text and elements. It's also distinct from the "box-shadow property" in that it applies drop shadows to the shape of an element rather than the actual box of an element.
<style>
img {filter: drop-shadow(8px 8px 10px gray);}
img {filter: drop-shadow(.5rem .5rem 1rem #e23)}
</style>
the hue-rotate() function's effect is applied to each and every pixel it is applied to, so all colors will update relative to their hue value's starting point.
<style>
.filtered {filter: hue-rotate 180deg);}
.filtered {filter: hue-rotate(-70deg);}
</style>
SVG filters: filter() let us import SVGs filters to use to create specialized visual effects.
The spec files these functions under a "logical combinations" heading, but it might be easier to think of them as functions for matching selectors.
:is(), :where(): ":is()" is a pseudo-class selector that accepts a range of selectors as its argument. This allows to group and target a wide range of selectors in an efficient way. ":where()"" is much like ":is()", only it has a specificity of zero, while the specificity of ":is()" is set to the highest specificity in the provided selector list.
<style>
:is(header, main, footer) p:hover {color: red; cursor: pointer;}
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) { list-style-type: square;}
:where(header, main, footer) p:hover {color: red; cursor: pointer;}
:is(section.is-styling, aside.is-styling, footer.is-styling) a {color: red;}
:where(section.where-styling, aside.where-styling, footer.where-styling) a {color: orange;}
</style>
The var() function is used to reference a custom property (see CSS-06-variables.html) and JavaScript's setProperty method can update custom properties in real time. This allows to make quickly and efficiently dynamic changes to things.
<style>
html {--color: orange;}
p {color: var(--color);}
</style>
These selectors use specialized argument notation that specifies patterns of what to select. This allows to do things like select every other element, every fifth element, every third element after the seventh element, etc. Pseudo-class selectors are incredibly versatile, and a thoughtful application of a few of these selectors can do the work of one or more node packages.
:nth-child() allows to target one or more of the elements present in a group of elements that are on the same level in the Document Object Model (DOM) tree.
<style>
li:nth-child(2) color: lime; /* select the second <li> element in a list*/
:nth-child(4n) {color: lime;} /* selects every fourth element among any group of siblings */
</style>
:nth-last-child() targets elements in a group of one or more elements that are on the same level in the DOM. It starts counting from the last element in the group and works backwards through the list of available DOM nodes.
<style>
p:nth-last-child(2) { background: red;}
:nth-last-child(4n) {color: lime;} /* Selects every 4th element among any group of siblings, counting backwards from the last one */
</style>
:nth-of-type() matches a specified collection of elements of a given type. For example, a declaration of img:nth-of-type(5) would target the fifth image on a page.
<style>
p:nth-of-type(4n) {color: lime; } /* Selects every fourth <p> element among any group of siblings */
p:nth-of-type(2n+1) { color: red; } /* Odd paragraphs */
p.fancy:nth-of-type(2n+1) {text-decoration: underline;} /* class of fancy */
</style>
:nth-last-of-type() can target an element in a group of elements of a similar type. It starts counting from the last element in the group, and will skip elements that don't apply as it works backwards.
<style>
li:nth-last-of-type(2) {background: lightslategrey;} /* counting backwards from the last one, every even <li> element.*/
</style>
:not() will select anything that isn't what you specify. For example, you could target anything that isn't an image with body:not(img). Scoping :not() to more focused selectors such as BEM's block class can give a great deal of versatility.
<style>
:not(p) {color: blue;} /* Selects any element that is NOT a paragraph */
body :not(div):not(span) {font-weight: bold;} /* Elements that are not <div> and not <span> elements */
body :not(div, .fancy) {text-decoration: overline underline; } /* Elements that are not <div>s or `.fancy` */
</style>
With these functions we can compare multiple values and apply the values when they are evaluated.
Those CSS functions provide ways to have dynamic layouts and more flexible design components. They can be used for container sizes, font-size, padding, and a lot more.
The CSS min function and max fuction are similar to Min and Max functions in JavaScript. They are used to get the minimum or maximum value of multiple attributes, and the attributes are separated by commas.
the "min()" function is used to set a minimum value. The browser has to choose the smallest of the values, what depends on the viewport width.
the "min()" function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value.
the "min()" function can be used anywhere: a "length", "frequency", "angle", "time", "percentage", "number", or "integer" is allowed.
Syntax: the "min()" function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.
the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like "length"). Different units for each value in the expression can be used. Also, parentheses can be used to establish computation order when needed.
Think of the "min()" function as finding the maximum value allowed for a property.
Codes:
<style>
input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 30vw); background-color: pink;}
form {margin: 4px; border: 1px solid black; padding: 4px;}
</style>
<div>
<form style="margin-left:4vw;">
<label>Type something:</label>
<input type="text">
</form>
</div>
the "max()" function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value.
the "max()" function can be used anywhere: a 'length', 'frequency', 'angle', 'time', 'percentage', 'number', or 'integer' is allowed.
Syntax: the "max()" function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.
the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like "length"), or nested min() and max() functions.Different units for each value in the expression can be used. Also, parentheses can be used to establish computation order when needed.
Think of the "max()" function as finding the minimum value allowed for a property.
Codes:
<style>
h3 {font-size: 2vw;}
h3.responsive {font-size: max(4vw, 2em, 2rem);}
</style>
<div style="margin-left:4vw;">
<h3>This text is always legible, but doesn't change size</h3>
<h3 class="responsive">This text is always legible, and is responsive, to a point</h3>
</div>
The resolved value will always remain between the minimum and maximum.
when providing minimum, maximum, and preferred values as arguments, "clamp()" will honor the preferred value so long as it does not exceed the minimum and maximum boundaries.
the "clamp()" CSS function clamps a value between an upper and lower bound. "clamp()" enables selecting a middle value within a range of values between a defined minimum and maximum.
the "clamp()" function can be used anywhere: a 'length', 'frequency', 'angle', 'time', 'percentage', 'number', or 'integer' is allowed.
"clamp()" calculates property value based on the central value. If the calculated value falls between the minimum and maximum, the central value will be applied to the element. If the calculated value falls below minimum or exceeds maximum, minimum or maximum will be applied respectively. There is no need for "calc()" function when passing math expressions in the comparison function.
"clamp()" will allow us to author things like components whose size will scale along with the size of the viewport, but would not shrink or grow past a specific size. This will be especially useful for creating CSS locks, where you can ensure a responsive type size will not get so small that it cannot be read.
Syntax: .element { width: clamp(min, preferred, max); }
the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like "length"), or nested min() and max() functions.
different units for each value in the expression can be used. Also, parentheses can be used to establish computation order when needed.
as math expressions, you can use addition, subtraction, multiplication and division without using the "calc()" function itself.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
Codes:
<style>
div.one {font-family: sans-serif; margin: 0 auto; width: min(30vw, calc(30% + 10vw));}
h4 { letter-spacing: 2px; font-size: clamp(1.8rem, 2.5vw, 2.8rem);}
.one p {line-height: 1.5; font-size: max(1.2rem, 1.2vw);}
</style>
<div class="one" style="margin-left:4vw;">
<4>Simple responsive test</h4>
<p class="spec"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu
convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus
varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum
viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et
urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet,
felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum
felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum
mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse
potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque
convallis ante nec augue porttitor, id tempus ante luctus.</p>
<p class="spec">Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec.
Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis
sodales vel id libero. Phasellus sit amet placerat lorem. </p>
</div>
color functions: these functions will output a filter or work on an image's color scheme:
drop-shadow(), rgb() and rgba(), radial-gradient(), blur(), brightness(), grayscale(), hue-rotate(), opacity(), saturate(), sepia(), contrast()
shape functions: these functions will create a shape (an image) or output a transformation:
circle(), cubic-bezier and other animation functions, invert(), matrix(), matrix3d(), perspective(), rotate() (also rotate3d(), rotateX(), etc.), scale() (also scale3d(), scaleX(), etc.), skew() (also skewX(), skewY()), steps(), translate() (also translate3d(), translateX(), etc.)
It sets the "currentcolor" value, which may be used as an indirect value on other properties and is the default for other color properties, such as "border-color".
Syntax
/* Keyword values */
color: currentcolor;
/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* <rgb()> values */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);
/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(.25turn 0% 40% / 50%);
/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;
The "color property" is specified as a single <color> value. The value must be a uniform color. It can't be a "<gradient>", which is actually a type of <image>.
text a
text b
text c
text d
text e
text f
text g
text h
text i
text j
code:
<div style="margin-left: 2vw;">
<p id="p1">text a</p>
<p id="p2">text b</p>
<p id="p3">text c</p>
<p id="p4">text d</p>
<p id="p5">text e</p>
<p id="p6">text f</p>
<p id="p7">text g</p>
<p id="p8">text h</p>
<p id="p9">text i</p>
<p id="p10">text j</p>
</div>
<style>
#p1 { color: red; }
#p2 { color: #f00; }
#p3 { color: #ff0000; }
#p4 { color: rgb(255,0,0); }
#p5 { color: rgb(100%, 0%, 0%); }
#p6 { color: hsl(0, 100%, 50%); }
/* 50% translucent */
#p7 { color: #ff000080; }
#p8 { color: rgba(255, 0, 0, 0.5); }
#p9 { color: hsla(0, 100%, 50%, 0.5); }
#p10 { color: initial;}
</style>
rgb(), rgba(): these functions allow you to use numbers to describe the red (r), green (g), blue (b), and alpha (a) levels of a color. The alpha value of 1 means that it is fully opaque, and won't show anything behind what the color is applied to.
<style>
p {color: rgb(255,0,0); }
p {color: rgb(100%, 0%, 0%); }
p {color: rgba(255, 0, 0, 0.5); }
.my-element {background-color: rgba(255, 0, 0, 1);} // fully opaque
.my-element {background-color: rgba(255, 0, 0, 0.5);} // transparency of 50%
</style>
hsl(), hsla()are functions that allow you to describe color. Instead of using red, green, and blue, they use hue (h), saturation (s), and lightness (l).
<style>
.my-element {background-color: hsl(0deg, 100%, 20%);} // dark red
.my-element {background-color: hsl(0deg, 100%, 80%);} // light red
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
This module provides a host of new color functions and improvements, opening up a world of new possibilities for developers.
HWB (hue, whiteness, blackness) is a color specification method that is similar to HSL.
The "hue argument" can be any number between 0 and 360, and it refers to a specific color on the color wheel (red, blue, teal, plum, etc.).
Whiteness specifies how much white is mixed into the hue, from 0-100 percent.
Blackness specifies how much black is mixed into the hue, from 0-100 percent.
An optional fourth argument, the alpha parameter, may be added to the mix to specify the color's opacity.
Syntax:
hwb(0 20% 40%)
//with an optional alpha argument for specifying the opacity
hwb(0 20% 40% / .3)
LAB color functions are based on the "CIELAB color space", which represents colors in a way that closely matches human perception. This color function provides access to a wider spectrum of colors than offered by the traditional RGB color space. LAB colors are referred to as "device-independent colors".
The L indicates lightness, while A and B are chromaticity coordinates.
More specifically, A and B are color directions.
The red-green axis is represented by positive A at the red end of the axis and negative A at the green end of the axis.
Similarly, the yellow-blue axis is represented by positive B at the yellow end of the axis and negative B at the blue end of the axis.
The LAB color space represents light more successfully than the HSL color space. It's important to note that the lightness axis in LAB should not be confused with the L axis in HSL.
Syntax:
lab(20% 100 20)
// with an optional alpha argument for specifying opacity
lab(20% 100 20 / .3)
LCH The L axis of the LCH color space is identical to that of the LAB color space. In fact, both color spaces allow access to a far wider range of colors because they are meant to cover the full spectrum of human vision.
The L in LCH is a percentage that stands for "light channel", and it can exceed 100 percent.
C, or "chroma", indicates the amount of color in the mix. In LCH, it can exceed 100 percent. When it does, the color will be outside the gamut of today's browsers.
H stands for "hue". This can be a number between 0 and 360, analogous to that of HSL or HWB.
Syntax:
lch(80% 80 80)
// with an optional alpha argument for specifying opacity
lch(80% 80 80 / .3)
The color-mix() function returns the result of two colors mixed in specified percentages. For example, color-mix(in lch, purple 50%, plum 50%) produces a mixture of 50% purple and 50% plum.
Syntax:
color-mix(in lch, purple 50%, plum 50%)
When working with the CSS color-mix() function, the following should be noted:
If the percentages for color1 and color2 are not specified they will each default to 50 percent, resulting in an equal mix of both colors.
If the percentage for color1 is not specified, it will default to the difference between 100 percent and color2's percentage.
If the percentage for color2 is not specified, it will default to the difference between 100 percent and color1's percentage.
If the percentages for color1 and color2 add up to more than 100 percent, they will be scaled down proportionately so that they add up to 100 percent.
If the percentages for color1 and color2 add up to less than 100 percent, they will be scaled up proportionately so that they add up to 100 percent.
The "in lch" parameter refers to the color space where the colors are mixed. Depending on the color space that is specified, mixing or combining colors can produce varied outcomes.
If the selected color space is unable to express the color (for example, if the HSL and HWB spaces are unable to express colors beyond the sRGB gamut), then the color will be adjusted accordingly. This process is referred to as "gamut mapping".
For more details, see color-mix() function here below
The color-contrast() function helps developers build websites that are accessible to people with differences or impairments in vision. Higher color contrast between the content and background improves the readability of text and non-decorative images.
color-contrast() compares the values of two colors from a list. The colors are examined from left to right, and the browser chooses the first color that matches the specified color ratio. If no color matches the desired color ratio, the color with the highest value (highest contrast) is selected.
Syntax:
//here no color ratio is stated, so it picks the color with the highest contrast ratio
color-contrast(wheat vs tan, sienna, #b22222, #d2691e)
// here a color ratio is stated and the color in the list that meets the specified ratio is picked.
color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)
One should consider the following additional details regarding the color-contrast() function:
Colors listed after the "vs" keyword and before the "to" keyword are examined sequentially from left to right. The color with the highest contrast is selected as the temporary winner.
If no target contrast ratio is specified, the temporary winner becomes the overall winner.
If a target contrast ratio is specified, but the temporary winner does not meet the target, either white or black is returned.
If two colors in the list have the same winning contrast ratio, the color that is listed earlier in the list is selected as the temporary winner.
The color() function allows the browser to display colors in any color space. This includes the display-p3 color space, which can display a larger range of colors compared to the conventional sRGB color space. In the new Level 5 specifications, the color() function is allowed to extend to custom color spaces.
Syntax:
color(display-p3 -0.6112 1.0079 -0.2192);
//with an optional alpha channel
color(display-p3 -0.6112 1.0079 -0.2192 / .3);
For details on the color() function syntax, see below.
The CSS accent-color property allows us to change the color of accented form controls provided by the browser's default styles to a custom color value.
Syntax:
.element{
accent-color: #010101;
}
The accent-color property is great for styling form controls, but it can currently only be used on specific elements, namely: checkbox, radio button, range, and progress.
The color() functional notation allows a color to be specified in a "particular, specified colorspace" rather than the implicit sRGB colorspace that most of the other color functions operate in.
Support for a particular colorspace can be detected with the color-gamut CSS media feature.
The @color-profile CSS at-rule can be used to define and name a color profile to be used in the color() function to specify a color.
Syntax:
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);
Values:
Functional notation: color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ] )
[<ident> | <dashed-ident>] is an optional <ident> or dashed-ident denoting the colorspace. If this is an <ident> it denotes one of the predefined colorspaces (such as display-p3); if it is a <dashed-ident> it denotes a custom colorspace, defined by a "@color-profile rule".
[ <number-percentage>+ | <string> ] is either one or more <number> or <percentage> values providing the parameter values that the colorspace takes, or a <string> giving the name of a color defined by the colorspace.
/ <alpha-value> (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.
The new values thus created are based on the channels of the colors getting mixed. Also, the color space in which you mix the colors affects the results. Working in a more perceptual color space - like oklch - will run through a different color range than something like srgb.
i.e. the ability to preserve opaque color values while adding some transparency to them. Now, you can use your brand color variables while creating variations of those colors at different opacities. The way to do this is to mix a color with transparent. When you mix your brand color blue with 10% transparent, you get a 90% opaque brand color. You can see how this enables you to quickly build color systems.
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
Values:
in : a literal token as a component of the syntax.
colorspace : one of "srgb", "srgb-linear", "lab", "oklab", "xyz", "xyz-d50", "xyz-d65", "hsl", "hwb", "lch", or "oklch", specifying the color space for interpolation.
hue-interpolation-method : optional; one of "shorter", "longer", "increasing", or "decreasing", specifying how <hue> values of the colors are interpolated. Note: This value is only valid if colorspace is one of "hsl", "hwb", "lch", and "oklch".
hue : a literal token as a component of the syntax.
color : any valid <color>.
p1, p2 : optional; <percentage> values between 0% and 100%, specifying the amount of each color to mix. They are normalized as follows: if both p1 and p2 are omitted, then p1 = p2 = 50%. If p1 is omitted, then p1 = 100% - p2. If p2 is omitted, then p2 = 100% - p1. If p1 = p2 = 0%, the function is invalid. If p1 + p2 ≠ 100%, then p1' = p1 / (p1 + p2) and p2' = p2 / (p1 + p2), where p1' and p2' are the normalization results.
<color-mix()> =
color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
<div>
<ul>
<li class="first">0%</li>
<li class="first">25%</li>
<li class="first">50%</li>
<li class="first">75%</li>
<li class="first">100%</li>
<li class="first"></li>
</ul>
</div>
<style>
li.first:nth-child(1) {background-color: color-mix(in srgb, #34c9eb 0%, white);}
li.first:nth-child(2) {background-color: color-mix(in srgb, #34c9eb 25%, white);}
li.first:nth-child(3) {background-color: color-mix(in srgb, #34c9eb 50%, white);}
li.first:nth-child(4) {background-color: color-mix(in srgb, #34c9eb 75%, white);}
li.first:nth-child(5) {background-color: color-mix(in srgb, #34c9eb 100%, white);}
li.first:nth-child(6) {background-color: color-mix(in srgb, #34c9eb, white);}
</style>
<div>
<div id="shorter">shorter</div>
<div id="longer">longer</div>
<div id="increasing">increasing</div>
<div id="decreasing">decreasing</div>
</div>
<style>
/* 20 degrees */
#shorter {background-color: color-mix(in hsl shorter hue, hsl(10 100% 50%), hsl(350 100% 50%));}
/* 340 degrees */
#longer {background-color: color-mix(in hsl longer hue, hsl(10 100% 50%), hsl(350 100% 50%));}
/* The resulting angle is between 0 and 360 degrees */
#increasing {background-color: color-mix(in hsl increasing hue, hsl(10 100% 50%), hsl(350 100% 50%));}
/* The resulting angle is between -360 and 0 degrees */
#decreasing {background-color: color-mix(in hsl decreasing hue, hsl(10 100% 50%), hsl(350 100% 50%));}
</style>
<div>
<h4>Color Pallete with color-mix()</h4>
<div class="color-lists">
<ul class="color-list">
<li style="--currentVal: var(--colorPrimary)">--colorPrimary</li>
<li style="--currentVal: var(--colorPrimary-a90)">--colorPrimary-a90</li>
<li style="--currentVal: var(--colorPrimary-a80)">--colorPrimary-a80</li>
<li style="--currentVal: var(--colorPrimary-a70)">--colorPrimary-a70</li>
<li style="--currentVal: var(--colorPrimary-a60)">--colorPrimary-a60</li>
<li style="--currentVal: var(--colorPrimary-a50)">--colorPrimary-a50</li>
<li style="--currentVal: var(--colorPrimary-a40)">--colorPrimary-a40</li>
<li style="--currentVal: var(--colorPrimary-a30)">--colorPrimary-a30</li>
<li style="--currentVal: var(--colorPrimary-a20)">--colorPrimary-a20</li>
<li style="--currentVal: var(--colorPrimary-a10)">--colorPrimary-a10</li>
</ul>
<ul class="color-list">
<li style="--currentVal: var(--colorSecondary)">--colorSecondary</li>
<li style="--currentVal: var(--colorSecondary-a90)">--colorSecondary-a90</li>
<li style="--currentVal: var(--colorSecondary-a80)">--colorSecondary-a80</li>
<li style="--currentVal: var(--colorSecondary-a70)">--colorSecondary-a70</li>
<li style="--currentVal: var(--colorSecondary-a60)">--colorSecondary-a60</li>
<li style="--currentVal: var(--colorSecondary-a50)">--colorSecondary-a50</li>
<li style="--currentVal: var(--colorSecondary-a40)">--colorSecondary-a40</li>
<li style="--currentVal: var(--colorSecondary-a30)">--colorSecondary-a30</li>
<li style="--currentVal: var(--colorSecondary-a20)">--colorSecondary-a20</li>
<li style="--currentVal: var(--colorSecondary-a10)">--colorSecondary-a10</li>
</ul>
</div>
</div>
<style>
:root {
--colorPrimary: hotpink;
--colorPrimary-a10: color-mix(in srgb, var(--colorPrimary), transparent 90%);
--colorPrimary-a20: color-mix(in srgb, var(--colorPrimary), transparent 80%);
--colorPrimary-a30: color-mix(in srgb, var(--colorPrimary), transparent 70%);
--colorPrimary-a40: color-mix(in srgb, var(--colorPrimary), transparent 60%);
--colorPrimary-a50: color-mix(in srgb, var(--colorPrimary), transparent 50%);
--colorPrimary-a60: color-mix(in srgb, var(--colorPrimary), transparent 40%);
--colorPrimary-a70: color-mix(in srgb, var(--colorPrimary), transparent 30%);
--colorPrimary-a80: color-mix(in srgb, var(--colorPrimary), transparent 20%);
--colorPrimary-a90: color-mix(in srgb, var(--colorPrimary), transparent 10%);
--colorSecondary: lime;
--colorSecondary-a10: color-mix(in srgb, var(--colorSecondary), transparent 90%);
--colorSecondary-a20: color-mix(in srgb, var(--colorSecondary), transparent 80%);
--colorSecondary-a30: color-mix(in srgb, var(--colorSecondary), transparent 70%);
--colorSecondary-a40: color-mix(in srgb, var(--colorSecondary), transparent 60%);
--colorSecondary-a50: color-mix(in srgb, var(--colorSecondary), transparent 50%);
--colorSecondary-a60: color-mix(in srgb, var(--colorSecondary), transparent 40%);
--colorSecondary-a70: color-mix(in srgb, var(--colorSecondary), transparent 30%);
--colorSecondary-a80: color-mix(in srgb, var(--colorSecondary), transparent 20%);
--colorSecondary-a90: color-mix(in srgb, var(--colorSecondary), transparent 10%);
}
.color-lists {display: flex;}
.color-list {list-style: none;}
li {display: flex; align-items: center;}
li::before { content: ""; display: inline-block; width: 1vw; height: 1vw;
background-color: var(--currentVal); margin-right: 0.5vw; border: 0.1vw solid;}
</style>
One common thing that can be donw with animation is to stretch and squash stuff. There is a catch, however: these CSS functions are a special subset, in that they can only work with the "transform property".
scale(), scaleX(), scaleY(), scaleZ(), scale3d(): scaling functions let you increase or decrease the size of something along one or more axes; if you use scale3d() you can even do this in three dimensions!
<img class="scale" src="images/nature.jpg" alt="Nature Image">
<style>
.scale {transform: scale(2, 1);}
</style>
translate(), translateX(), translateY(), translateZ(), translate3d(): translate functions let you reposition an element along one or more axes; you can also extend this manipulation into three dimensions.
<style>
.moved {transform: translate(10px);} /* Equal to: translateX(10px) or translate(10px, 0) */
.moved {transform: translate(10px, 10px);}
.translated {transform: translate3d(0,60px,0);} /* translate3d(tx, ty, tz)*/
</style>
perspective() lets you adjust the appearance of an object to make it look like it is projecting up and out from its background.
<style>
.parent {perspective: 1000px;}
.text:hover{transfrom: perspective(400px) rotateX(20deg) rotateY(-15deg);}
</style>
rotate(), rotateX(), rotateY(), rotateZ(), rotate3d(): rotate functions let you swivel an element along one or more axes.
<style>
.rotated {transform: rotate(45deg);} /* Equal to rotateZ(45deg) */
img {transform: rotate(90deg);} /* move around a fixed point */
.rotated {transform: rotate3d(0, 1, 0, 60deg);}
</style>
skew, skewX, skewY: skew functions apply a distortion effect relative to a single point. The amount of distortion is proportionate to the angle and distance declared, meaning that the further the effect continues in a direction the more pronounced it will be.
<style>
.skewed {transform: skew(10deg);} /* Equal to skewX(10deg) */
.skewed {transform: skew(10deg, 10deg);}
</style>
Gradients are created when you transition one color to one or more other colors. Gradient functions allow you to specify a whole range of properties, including: color values, the position on the gradient area where that color comes in, what angle the gradient is positioned at.
The colors we use in a gradient can be described using CSS color functions!
<style>
#grad1 {height: 200px; background-color: red; background-image: linear-gradient(red, yellow);}
.angled-gradient {background: linear-gradient(70deg, blue, pink); }
</style>
linear-gradient(), repeating-linear-gradient(): linear gradients apply the color transformation in a straight line, from one point to another (this line can be set at an angle as well). In cases where there's more area than gradient, using repeating-linear-gradient() will repeat the gradient until all the available area has been filled.
<style>
.simple-linear {background: linear-gradient(blue, pink);}
.horizontal-gradient {background: linear-gradient(to right, blue, pink);}
.diagonal-gradient {background: linear-gradient(to bottom right, blue, pink);}
.multicolor-linear {background: linear-gradient(to left, lime 28px, red 77%, cyan);}
#grad {background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
#grad3 {background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);}
</style>
radial-gradient(), repeating-radial-gradient(): with radial gradients, color transformations radiate outward from a center point. They're often used to create a semitransparent screen to help separate a modal from the background it is placed over.
<style>
.radial-gradient {background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);}
div {background: repeating-radial-gradient(yellow 20%, red 40%); height: 200px;}
div {background: repeating-radial-gradient(ellipse, green 20%, lime 40%); height: 200px;}
.radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,red, black 5%, blue 5%, green 10%); background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red 0 5%, green 5% 10%);
}
</style>
conic-gradient(), repeating-conic-gradient(): with conic gradients, the color rotates around a circle. Unfortunately, support for conic gradients continues to be poor.
<style>
#grad1 {height: 200px; width: 200px; background-color: red; background-image: conic-gradient(red, yellow, green);}
div {backgrund: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);}
div {background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat; border: 1px solid; }
#grad {background-image: conic-gradient(at 60% 45%, red, yellow, green);}
#grad {background-image: repeating-conic-gradient(red 10%, yellow 20%); border-radius: 50%; }
</style>
Shape CSS functions only work with one property: clip-path. This property is used to mask portions of something, allowing to create all sorts of cool effects.
the circle() function creates a circular shape for your mask, allowing you to specify its radius and position.
<style>
.circle {float: left; width: 150px; height: 150px; shape-outside: circle();}
div {float: left; width: 185px; height: 185px; shape-outside: circle();}
img {float: left; shape-outside: circle(50%);}
</style>
the ellipse() function will draw a rounded shape, only instead of a perfect circle, ellipse() lets you construct an oblong mask.
<style>
div {float: left; width: 150px; height: 125px; shape-outside: ellipse(); }
.shape {float: left; shape-outside: ellipse(40% 50% at left); margin: 20px; width: 100px; height: 200px;}
.shape {float: left; shape-outside: ellipse(closest-side farthest-side at 30%); margin: 20px; width: 100px; height: 140px;}
</style>
the polygon() function allows to specify an arbitrary number of points, allowing you to draw complicated shapes. polygon() also takes an optional "fill-rule argument", which specifies which part of the shape is the inside part.
<style>
div {float: left; width: 200px; height: 200px; shape-outside: polygon(0px 0px, 200px 100px, 0px 200px);}
.shape {float: left; shape-outside: polygon(0px 0px, 0px 189px, 100.48% 94.71%, 200px 120px, 80.67% 37.17%); width: 200px; height: 200px;}
</style>
the inset function will mask out a rectangle inside of the element you apply it to.
<style>
div {float: left; width: 200px; height: 150px; shape-outside: inset(50px);}
.shape { float: left; width: 150px; height: 100px; shape-outside: inset(20px 50px 10px 0 round 50px); background-color: rebeccapurple; border: 2px solid black; border-radius: 10px; margin: 20px; padding: 20px;}
.inset {float: left; width: 200px; height: 150px; shape-outside: inset(50px);}
</style>
url() allows you to link to other resources to load them. This can include images, fonts, and even other stylesheets. For performance reasons, it's good practice to limit the things you load via url(), as each declaration is an additional HTTP request.
<style>
div {background-image: url(19.jpg); height: 220px; width: 500px;}
.topbanner {background: url("topbanner.png") #00D no-repeat fixed;}
li::after content: ' - ' url(star.gif);
.blur { filter: url(my-file.svg#svg-blur);} /* the URL of an SVG file used as a filter */
</style>
attr()allows to reach into HTML, snag an attribute's content, and feed it to the CSS content property. attr() is commonly used in print stylesheets, where it is used to show the URL of a link after its text. It's also used to show the "alt" description of an image if it fails to load.
<style>
a:after {content: " (" attr(href) ")";}
abbr[title]:after {content: " (" attr(title) ")";}
a[href]::after {content: " (" attr(href) ")"; font-style: italic; }
</style>
calc() takes two arguments and calculates a result from the operator (+, -, *, /) you supply it, provided those arguments are numbers with or without an accompanying unit. calc() can mix units, meaning you can do things like subtract 6rem from 100%. calc() is also updated on the fly, so if that 100% represents a width, it'll still work if that width changes.
<style>
.me {position: absolute; left: 50px; width: calc(100% - 20%); height:calc(500px - 300px); background-color: green;padding-top:30px; text-align: center;}
h1 {font-size: calc(1.5rem + 3vw);}
#formbox {width: calc(100% / 6); border: 1px solid black; padding: 4px;}
</style>
the lang() function can be used to target the presence of the attribute's value and conditionally apply styling based on it. One common use for this selector is to set language-specific quotes.
<style>
p:lang(it) {background: yellow;}
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
</style>
The spec files these functions under a "logical combinations" heading, but it might be easier to think of them as functions for matching selectors.
:is(), :where(): ":is()" is a pseudo-class selector that accepts a range of selectors as its argument. This allows to group and target a wide range of selectors in an efficient way. ":where()"" is much like ":is()", only it has a specificity of zero, while the specificity of ":is()" is set to the highest specificity in the provided selector list.
<style>
:is(header, main, footer) p:hover {color: red; cursor: pointer;}
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) { list-style-type: square;}
:where(header, main, footer) p:hover {color: red; cursor: pointer;}
:is(section.is-styling, aside.is-styling, footer.is-styling) a {color: red;}
:where(section.where-styling, aside.where-styling, footer.where-styling) a {color: orange;}
</style>
CSS Grid allows to efficiently create adaptive, robust layouts for multiple screen sizes. Grid introduces the following CSS functions:
the fit-content() function "clamps" the size of grid rows or columns, letting you specify a maximum size a grid track can expand to. "fit-content()" accepts a range of values, but most notable among them are "min-content" and "max-content". These values allow you to tie your layout to the content it contains.
<style>
#container {display: grid; grid-template-columns: fit-content(150px) fit-content(250px) fit-content(350px) 1.5fr; grid-gap: 5px; box-sizing: border-box; height: 100%; width: 100%; background-color: #563d7c; padding: 8px;}
.item { width: -moz-fit-content; width: fit-content; background-color: #8ca0ff; padding: 5px; margin-bottom: 1em;}
.box { width: fit-content;} /* ... is the same as ... */ .box{width: auto; min-width: min-content; max-width: max-content;}
</style>
minmax() allows to set the minimum and maximum desired heights and widths of grid rows and columns. This function can also use "min-content" and "max-content".
<style>
#container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px;
box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; }
.grid {display: grid; grid-template-columns: minmax(100px, 200px) 1fr 1fr;}
</style>
repeat() allows to loop through patterns of grid column and rows.The function helps well for two scenarios: 1/ when you do know how many rows or columns you need; and 2> when you don't know how many rows or columns you need.
<style>
.container {display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(3, 1fr 2fr); grid-template-rows: repeat(2, 100px auto 20%); }
.container {display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(4, [col] 1fr); ngrid-template-rows: repeat(5, [row] 150px);}
</style>
The web is typography, so it makes sense to give this type the care and attention it deserves.
While CSS provides some functions specifically designed to unlock the potential of the website or webapp's chosen typefaces, it is advised to not use the following functions to access these advanced features.
Instead, use lower-level syntax via font-feature-settings.
character-variant(), styleset(), stylistic(): utilizing these functions activates special alternate characters, provided they are present in the font's glyph set. Unfortunately, it is not a standardized offering. Different typefaces will have different ranges of support, based on what the typographer chose to include. It would be wise to check to see if the font you're using supports these special features before writing any code.
<style>
</style>
format(): when you are importing a font via the "url() function", the "format() function" is an optional hint that let you manually specify the font's file format. If this hint is provided, the browser won't download the font if it does not recognize the specified file format.
<style>
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2'), /* Cutting edge browsers */
url('mywebfont.woff') format('woff'), /* Most modern Browsers */
url('mywebfont.ttf') format('truetype'); /* Older Safari, Android, iOS */
}
</style>
leader(): the W3C had plans for them with its "CSS Generated Content for Paged Media Module", but it unfortunately seems like leader() never quite managed to take off. Fortunately, the W3C also provides an example of how to accomplish this effect using an application of the "content property".
local() allows to specify a font installed locally, meaning it is present on the device. Local fonts either ship with the device, or can be manually installed. However, it is recommended not to specify a local font that needs to be manually installed.
<style>
@font-face {
font-family: 'FeltTipPen';
src: local('Felt Tip Pen Web'), /* Full font name */
local('FeltTipPen-Regular'); /* Postscript name */
}
</style>
the ornaments() function can be used to enable special dingbat characters.
a swash() is an alternate visual treatment for letters that give them an extra-fancy flourish. They're commonly found in italic and cursive-style typefaces.
These are the un-categorizable CSS functions, things that don't fit neatly elsewhere.
element() allows you to specify the ID of another element to create an "image" of what that element looks like. You can then apply other CSS to that image, including stuff like CSS filters!
<div id="css-source"><h1>Page Preview</h1><
<div id="css-result"></div>
<style>
#css-result {background: -moz-element(#css-source) no-repeat; width: 256px; height: 32px; background-size: 80%; border: dashed;}
</style>
the image-set() function allows to specify a list of images for the browser to select for a background image, based on what it knows about the capabilities of its display and its connection speed. It is analogous to what you would do with the "srcset property".
<style>
.box {background-image: -webkit-image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x); background-image: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x);}
.box {background-image: url("large-balloons.jpg"); background-image: image-set( "large-balloons.avif" type("image/avif"), "large-balloons.jpg" type("image/jpeg"));}
</style>
the ::slotted() pseudo-element selector is used to target elements that have been placed into a slot inside a HTML template. "::slotted()" is intended to be used when working with Web Components, which are custom, developer-defined HTML elements.
<style>
::slotted(*) {font-weight: bold;} /* Selects any element placed inside a slot */
::slotted(span) { font-weight: bold;} /* Selects any <span> placed inside a slot */
</style>
CSS includes features and functionality that are actively being worked on. They can sometimes be previewed using browsers that have access to the bleeding edge.
Firefox Nightly and Chrome Canary are two such browsers.
Other features and functionality are so new that they only exist in what is being actively discussed by the W3C.
the annotation() function enables "Alternate Annotation Forms", characters reserved for marking up things like notation and annotation. These characters typically will be outlined with a circle, square, or diamond shape.
counter(), counters(): browser-generated list content are called counters. By using a combination of the "::marker pseudo-element selector", the "content property", and the "counter() function", we can control the content and presentation of the counters on an ordered list.
the cross-fade() function will allow you to blend one background image into one or more other background images. Its proposed syntax is similar to "gradient functions", where you can specify the stops where images start and end.
the dir() function allows you to flip the orientation of a language's reading order. For English, that means a left-to-right (ltr) reading order gets turned into right-to-left (rtl). Only Firefox currently has support for dir().
env(), short for environment, allows you to create conditional logic that is triggered if the device's User Agent matches up. It was popularized by the iPhone X as a method to work with its notch.
has() is a relational pseudo-class that will target an element that contains another element, provided there is at least one match in the HTML source.
the image() function will let you insert either a static image (referenced with url(), or draw one dynamically via gradients and element().
host(), host-context()
:nth-col(), :nth-last-col()will allow you to select one or a specified series columns in a CSS grid to apply styling to them. Unlike pseudo class selectors, :nth-col() and :nth-last-col() should be able to target implicit grid columns.
the symbols() function allows you to specify a list of different kinds of characters to use for list bullets.
While deprecated CSS functions may still render in the browser for legacy support reasons, it isn't recommended to use them going forward.
matrix(), matrix3d() were turned into more discrete "sizing" and "scaling" functions.
rect() was part of the deprecated "clip property". Use the "clip-path property" and its values instead.
target-counter, target-counters(), target-text()s were intended to help work with fragment URLs for paged (printed) media.